<!-- 应用中心百宝箱页面 -->
<template>
  <view class="container">
    <!-- 广告位区域 -->
    <view class="ad-section">
      <image class="ad-banner" src="https://example.com/ad-banner.jpg" mode="aspectFill" />
    </view>

    <!-- 九宫格组件 -->
    <view class="grid-container">
      <block v-for="(item, index) in gridItems" :key="index">
        <view class="grid-item" @click="navigateTo(item.route)">
          <view class="icon-bg">
            <image class="icon" :src="item.icon" />
          </view>
          <text class="label">{{ item.label }}</text>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
	import tool from '@/utils/tool.js'
	import postApi from '@/api/postApi.js'
export default {
  data() {
    return {
      // 九宫格数据配置
      gridItems: [
        { label: '发布任务', icon: 'https://example.com/publish-task-icon.png', route: '/pages/publishTask/publishTask' },
        { label: '接取任务', icon: 'https://example.com/take-task-icon.png', route: '/pages/takeTask/takeTask' },
        { label: '代缴电费', icon: 'https://example.com/pay-electricity-icon.png', route: '/pages/payElectricity/payElectricity' },
        { label: '洗鞋服务', icon: 'https://example.com/shoe-washing-icon.png', route: '/pages/shoeWashing/shoeWashing' },
        { label: '贴膜服务', icon: 'https://example.com/film-pasting-icon.png', route: '/pages/filmPasting/filmPasting' },
        { label: '干洗服务', icon: 'https://example.com/dry-cleaning-icon.png', route: '/pages/dryCleaning/dryCleaning' },
        { label: '租车服务', icon: 'https://example.com/car-rental-icon.png', route: '/pages/carRental/carRental' },
		{ label: '我来评分', icon: 'https://example.com/car-rental-icon.png', route: '/pages/mark/mark' },
		{ label: '随机吃啥', icon: 'https://example.com/car-rental-icon.png', route: '/pages/eatRandom/eatRandom' },
      ],
    };
  },
  onShow() {
    const app = getApp();
    if (!app.globalData.isLoggedIn) {
      const token = uni.getStorageSync('token');
      if (!token) {
        uni.switchTab({
          url: '/pages/mine/mine'
        });
        return;
      }
    }
  },
  methods: {
    // 通用页面跳转方法
    navigateTo(route) {
      if (route) {
        uni.navigateTo({
          url: route,
        });
      } else {
        uni.showToast({
          title: '功能开发中',
          icon: 'none',
        });
      }
    },
  },
};
</script>

<style scoped>
/* 页面外容器 */
.container {
  background-color: #f7f7f7;
  padding: 20px;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 广告区域 */
.ad-section {
  margin-bottom: 20px;
}

.ad-banner {
  width: 100%;
  height: 180px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 九宫格容器 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* 动态列数 */
  gap: 20px;
  justify-items: center;
}

/* 九宫格项 */
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 图标背景 */
.icon-bg {
  width: 60px;
  height: 60px;
  background-color: #f0f8ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.icon {
  width: 36px;
  height: 36px;
}

/* 标签样式 */
.label {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
